<template>
  <div class="team">
    <div class="select">
      <el-select v-model="select" placeholder="Select" size="large" @change="select_change">
        <el-option v-for="item in teams.unit" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </div>
    <div class="header">
      <div class="header-body">
        <div class="header-body-content">
          <div class="img">
            <img :src="team.img" alt="加载中……" />
          </div>
          <div class="text">
            <div class="text-name">{{ team.name }}</div>
            <div class="text-sign">{{ randomItem }}</div>
          </div>
          <div class="button">
            <el-button style="background-color: #e0e0e0; color: #40485b">进入团队工作台</el-button>
          </div>
        </div>
        <div class="header-body-layout">
          <ul>
            <li
              v-for="(item, index) in navs"
              :key="index"
              :class="{ active: $route.name === item.name }"
              @click="$router.push({ name: item.name })"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="body-left">
        <router-view></router-view>
      </div>
      <div class="body-right">右侧</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive, ref } from "vue";
import { listTeamByUserIdApi } from "@/api/team/api";
import { TeamInfo } from "@/api/team/type";
import { useTeamStore } from "@/stores/team.sotre";
import { listUserByTeamIdApi } from "@/api/user/api";

// const team = reactive<TeamInfo>({
//   id: 0,
//   name: "",
//   sign: "",
//   money: 0,
//   img: "",
//   credit: 0
// });

const select = ref("");

const items = [
  "你已经完成了这么多任务，继续加油！",
  "完成任务需要勇气和毅力，你已经展现出这些品质了。",
  "每完成一个任务，你就更接近实现你的目标。",
  "你的努力和奉献让我们的团队更加强大。",
  "我相信你有能力完成这个任务，让我们一起努力！",
  "任务完成得越好，你就越接近成功。",
  "你的努力和付出将为你带来更多的机会和成就。",
  "坚持不懈地完成任务，你会逐渐提高自己的能力和技能。",
  "完成任务不仅是为了完成任务本身，更是为了展现你的能力和才华。",
  "你已经证明了自己是一个优秀的团队成员，继续努力让我们取得更大的成功吧！"
];
const randomItem = ref("");
const updateRandomItem = () => {
  const index = Math.floor(Math.random() * items.length);
  randomItem.value = items[index];
};

const team = reactive<TeamInfo>({
  id: 0,
  name: "",
  sign: "",
  money: 0,
  img: "",
  credit: 0
});

const teams = reactive({
  unit: [] as TeamInfo[]
});

const navs = reactive<
  {
    id: number;
    title: string;
    name: string;
  }[]
>([
  {
    id: 0,
    title: "创建者简介",
    name: "Team"
  },
  {
    id: 1,
    title: "团队简介",
    name: "Team-profit"
  },
  {
    id: 2,
    title: "团队任务",
    name: "Team-Task"
  },
  {
    id: 3,
    title: "团队成员",
    name: "Team-Member"
  }
]);
const teamStore = useTeamStore();
const select_change = (index: number) => {
  Object.assign(team, teams.unit[index - 1]);
  teamStore.load(team);

  // Object.assign(teamStore.$state.teamInfo, team);

  updateRandomItem();
};
onBeforeMount(() => {
  listTeamByUserIdApi().then((res) => {
    if (res.code === 200) {
      Object.assign(teams.unit, res.data);
      Object.assign(team, teams.unit[0]);
      teamStore.load(team);
      // console.log(teams.unit[0]);
      updateRandomItem();
      select.value = teams.unit[0].name;
    }
  });
});
</script>

<style lang="less" scoped>
.team {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.select {
  position: absolute;
  top: 10px;
  left: 20px;
  background-color: wheat;
}

.header {
  height: 200px;
  width: 100%;
  background-color: grey;
  display: flex;
  justify-content: center;
  &-body {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &-content {
      display: flex;
      width: 100%;
      background-color: coral;
      height: 150px;
      justify-content: space-between;
    }
    &-layout {
      background-color: aquamarine;
      margin-bottom: 10px;
      height: 50px;
      display: flex;
      flex-direction: row;
      ul {
        display: flex;
        flex-direction: row;
        li {
          position: relative;
          line-height: 50px;
          padding: 0 20px;
          font-weight: 600;
          cursor: pointer;
        }
      }
      .active {
        color: rgb(19, 136, 182);
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          // width: 60%;
          height: 4px;
          border-radius: 4px;
          background-color: rgb(19, 136, 182);
        }
      }
    }
    background-color: aqua;
  }
  .img {
    width: 96px;
    height: 96px;
    margin: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .text {
    margin: 20px;
    flex: 1;
    &-name {
      font-weight: 500;
      font-size: 24px;
      margin: 10px;
    }
    &-sign {
      // font-weight: 500;
      font-size: 14px;
      margin: 10px;
      // color: gray;
    }
  }
  .button {
    margin: 20px;
  }
}
.body {
  height: 560px;
  width: 70%;
  background-color: white;
  display: flex;
  flex-direction: row;
  &-left {
    width: 70%;
    background-color: coral;
    margin: 10px;
  }
  &-right {
    flex: 1;
    background-color: bisque;
    margin: 10px;
  }
}
</style>
